<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">礼品</block>
		</cu-custom>

		<view class="bg-white">
			<view class="flex padding solid-bottom justify-between">
				<view class="cardtab">
					<text @click="changeSourFun(1)" :class="{'active':active===1}">全部</text>
					<text @click="changeSourFun(2,1)" :class="{'active':active===2}">物流发货</text>
					<text @click="changeSourFun(3,1)" :class="{'active':active===3}">到店兑换</text>
				</view>
			</view>

		</view>

		<view v-if="active===1">
			<view class="qui-cells radius5" style="margin: 15rpx;">

				<navigator class="qui-cell" v-for="(item,index) in changeSour" :key="index" :url="redirtedUrl(item)">
					<view class="cell-hd">
						<image :src="`${imgurl}${item.ImgUrl}`" class="img84"></image>
					</view>
					<view class="cell-bd">
						<view class="fs28 line1" v-text="item.PrizeName"></view>
						<view class="fs20 text-muted">
							<text class="mr30" v-text="statusStr(item)"></text>
							<text v-if="item.Status==3" v-text="item.GetCreateTime"></text>
							<text class="fs20 text-orange" v-if="item.Status==2 && item.GiftCategory==2 && cumputedExpiration(item)!=-1">{{`(${cumputedExpiration(item)}天后过期)`}}</text>
						</view>
					</view>
					<view class="cell-ft" v-if="(item.GiftCategory == 1 && item.Status == 4)&&(item.DetailsArea || '')==''">
						<view class="getbtn getbtn1" @tap.stop="writeAddress(item.Id)">填写地址</view>
					</view>
				</navigator>

			</view>

		</view>
		<view v-if="active===2">
			<view class="flex padding justify-between bg-white">
				<view class="cardtab1">
					<text @click="changeSourFun(2,1)" :class="{'active1':active1===1}">待发货</text>
					<text @click="changeSourFun(2,2)" :class="{'active1':active1===2}">已发货</text>
				</view>
			</view>
			<view class="qui-cells radius5" style="margin: 15rpx;">
				<view class="qui-cell" v-for="(item,index) in changeSour" :key="index">
					<view class="cell-hd">
						<image :src="`${imgurl}${item.ImgUrl}`" class="img84"></image>
					</view>
					<view class="cell-bd">
						<view class="fs28 line1" v-text="item.PrizeName"></view>
						<view class="fs20 text-muted">
							<text class="mr30" v-text="statusStr(item)"></text>
							<text v-if="item.Status==3" v-text="item.GetCreateTime"></text>
							<text class="fs20 text-orange" v-if="item.Status==2 && item.GiftCategory==2 && cumputedExpiration(item)!=-1">{{`(${cumputedExpiration(item)}天后过期)`}}</text>
						</view>
					</view>
					<view class="cell-ft" v-if="(item.GiftCategory == 1 && item.Status == 4)&&(item.DetailsArea || '')==''">
						<view class="getbtn getbtn1" @tap.stop="writeAddress(item.Id)">填写地址</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="active===3">
			<view class="flex padding justify-between bg-white">
				<view class="cardtab1">
					<text @click="changeSourFun(3,1)" :class="{'active1':active1===1}">全部</text>
					<text @click="changeSourFun(3,2)" :class="{'active1':active1===2}">即将过期</text>
				</view>
			</view>
			<view class="qui-cells radius5" style="margin: 15rpx;">
				<view class="qui-cell" v-for="(item,index) in changeSour" :key="index">
					<view class="cell-hd">
						<image :src="`${imgurl}${item.ImgUrl}`" class="img84"></image>
					</view>
					<view class="cell-bd">
						<view class="fs28 line1" v-text="item.PrizeName"></view>
						<view class="fs20 text-muted">
							<text class="mr30" v-text="statusStr(item)"></text>
							<text v-if="item.Status==3" v-text="item.GetCreateTime"></text>
							<text class="fs20 text-orange" v-if="item.Status==2 && item.GiftCategory==2 && cumputedExpiration(item)!=-1">{{`(${cumputedExpiration(item)}天后过期)`}}</text>
						</view>
					</view>
					<view class="cell-ft" v-if="(item.GiftCategory == 1 && item.Status == 4)&&(item.DetailsArea || '')==''">
						<view class="getbtn getbtn1" @tap.stop="writeAddress(item.Id)">填写地址</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import base from 'utils/base.js';
	export default {
		data() {
			return {
				active: 1,
				active1: 1,
				imgurl: this.imgurl,
				pageSour: [], //全部礼品
				changeSour: [], //切换数据列表
			}
		},
		mounted() {
			let time = 0;
				let globalData = getApp().globalData;
			let current = this;
			let si = setInterval(function() {
				time = time + 1;
				if (globalData.ticket) {
						current.lodingInitPage();
					clearInterval(si);
				}
				if (time > 40) clearInterval(si);
			}, 200);
		
		},
		methods: {
			mdInfo() {
				uni.navigateTo({
					url: '/pages/home/mdInfoEdit'
				})
			},
			//主界面数据展示、列表切换条件 1红包 2积分 3实物
			lodingInitPage() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});

				var _this = this;
				//获取用户信息
				let globalData = getApp().globalData;
				let userInfo = globalData.UserInfo;
				var requstData = {
					"UserId": userInfo.UserID,
					"ActivityPrizeType": 3,
					"PageIndex": 0,
					"PageSize": 100
				}

				let params = {
					hideLoading: true,
					type: 'POST',
					url: '/Activity/GetActivityPrizeHistoryListByUserId',
					data: requstData,
					sCallback: function(response) {
						uni.hideLoading();
						if (response.Success) {
							var thisSour = response.Data;
							if ((thisSour || null) == null) return false;

							//提取物流发货/到店兑换数据
							thisSour.forEach(function(item) {
								if ((item.GiftCategory == 1 && item.Status == 4) || (item.GiftCategory == 2 && item.Status == 2) || item.Status ==
									3 || item.Status == 5) {
									item.expiration = 0;
									if (item.GiftCategory == 1 && item.Status == 4)
										item.StatusName = "商家待发货";
									if (item.Status == 3)
										item.StatusName = "商家已发货";
									if (item.GiftCategory == 2 && item.Status == 2)
										item.StatusName = "待兑换";
									if (item.Status == 5)
										item.StatusName = "已兑换";
									_this.pageSour.push(item);
								}
							});

							_this.changeSour = _this.pageSour;
						} else {
							uni.showToast({
								icon: 'none',
								title: response.Msg
							});
						}
					}
				};
				base.ActivityRequest(params);
			},
			//计算礼品兑换到期时间，小于三天提示
			cumputedExpiration(item) {
				var now = (new Date()).getTime();
				//礼品为到店兑换类型
				if (item.GiftCategory == 2) {
					switch (item.Conversiontype) {
						case 1: //长期有效
							return -1;
						case 2: //固定时间端
							var conversion = (item.Conversion || "").split("^");
							var end = (new Date(conversion[1])).getTime();
							var times = end - now;
							if (times > 0 && times <= 259200000) {
								var day = parseInt(times / (1000 * 60 * 60 * 24));
								return day;
							}
							return -1;
						case 3: //领取后多少天
							var msel = parseFloat(item.Conversion || 0) * 1000 * 60 * 60 * 24;
							var end = (new Date(item.GetCreateTime)).getTime() + msel;
							var times = end - now;
							if (times > 0 && times <= 259200000) {
								var day = parseInt(times / (1000 * 60 * 60 * 24));
								return day;
							}
							return -1;
						case 4: //领取后，以营销活动结束时间为期限
							var end = (new Date(item.ActivityEndTime)).getTime();
							var times = end - now;
							if (times > 0 && times <= 259200000) {
								var day = parseInt(times / (1000 * 60 * 60 * 24));
								return day;
							}
							return -1;
						default:
							return -1;
					}
				}
			},
			//tab点击切换筛选数据(tab:0 全部，1 物流发货，2 到店兑换)
			changeSourFun(tab, flag) {
				var _this = this;
				_this.active = tab;
				_this.active1 = flag;
				var alllist = _this.pageSour;
				_this.changeSour = [];
				//全部
				if (tab == 1) _this.changeSour = alllist;
				//物流发货
				if (tab == 2) {

					alllist.forEach(function(item) {
						if (item.GiftCategory == 1 && item.Status == 4 && flag == 1) //商家待发货
							_this.changeSour.push(item);
						else if (item.Status == 3 && flag == 2) //已发货
							_this.changeSour.push(item);
					});

				}
				//到店兑换
				if (tab == 3) {
					alllist.forEach(function(item) {
						if (((item.GiftCategory == 2 && item.Status == 2) || item.Status == 5) && flag == 1) //全部
							_this.changeSour.push(item);
						else if (item.GiftCategory == 2 && item.Status == 2 && flag == 2 && _this.cumputedExpiration(item) != -1) //即将到期
							_this.changeSour.push(item);
					});
				}
			},
			//点击填写地址
			writeAddress(id) {
				uni.navigateTo({
					url: `/pages/my/setting/address?businesstype=lipin&activityprizehistoryid=${id}`
				});
			},
		},
		computed: {
			//格式化状态
			statusStr() {
				return function(item) {
					if (item.GiftCategory == 1 && item.Status == 4) //商家待发货
						item.StatusName = "商家待发货";
					else if (item.GiftCategory == 2 && item.Status == 2) //待兑换
						item.StatusName = "待兑换";

					return item.StatusName;
				}
			},
			//待发，已收货详情
			redirtedUrl() {
				return function(item) {
					uni.setStorageSync("goods_img",item.ImgUrl);
					if ((item.DetailsArea || "") != "" && (item.GiftCategory == 1 && item.Status == 4) || item.Status == 3) //代发货，已发货
						return `/pages/my/lipinGive?Id=${item.Id}&ActivityId=${item.ActivityId}`;
					else if ((item.GiftCategory == 2 && item.Status == 2) || item.Status == 5) //待兑换，已兑换
						return `/pages/my/lipinCode?Id=${item.Id}&ActivityId=${item.ActivityId}`;
					else
						return "";
				}
			},

		},
	}
</script>

<style lang="scss">
	.cardtab1 {
		text {
			font-size: 24rpx;
			color: #585858;
			padding: 0 30rpx;

			&:not(:last-child) {
				border-right: 1px solid #bababa;
			}
		}

		.active1 {
			position: relative;
			font-size: 24rpx;
			color: #ff631f;
			font-weight: 600;
		}
	}

	.img54 {
		width: 54rpx;
		height: 54rpx;
	}

	.img84 {
		width: 84rpx;
		height: 84rpx;
	}

	.getbtn {
		padding: 0 25rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #ff5e1f;
		border-radius: 25rpx;
		font-size: 24rpx;
		color: #ffffff;
		text-align: center;
		display: inline-block;
	}

	.getbtn1 {
		background: none;
		border: solid 1rpx #ff641f;
		color: #ff5e1f;
	}

	.cardtab {
		text {
			font-size: 28rpx;
			color: #585858;
			padding: 30rpx;
		}

		.active {
			position: relative;
			font-size: 28rpx;
			color: #1a1a1a;
			font-weight: 600;

			&:before {
				position: absolute;
				content: '';
				display: inline-block;
				width: 63rpx;
				margin: 0 auto;
				left: 0;
				right: 0;
				bottom: 0;
				height: 6rpx;
				background-color: #ff3a1a;
			}
		}
	}
</style>
